<template>
  <div class="box-login">
    <!-- 顶栏 -->
    <div class="box1">
      <div class="box2"></div>
      <div class="title">账号登录</div>
    </div>

    <!-- 手机短信登录模块 -->
    <div class="box-login-content box-login-phone" v-if="loginInfo.isPhoneLogin">
      <van-cell-group>
        <van-field label="+86 >" placeholder="手机号码" v-model="loginInfo.phoneNumber" />
        <van-field v-model="loginInfo.sms" center clearable placeholder="请输入短信验证码">
          <van-button
            class="yanzheng"
            slot="button"
            size="small"
            :disabled="isSend"
            @click="sendCode"
          >发送验证码</van-button>
        </van-field>
      </van-cell-group>
      <van-button class="btn" color="#FF6700" size="large" @click="login">立即登录/注册</van-button>
      <van-button class="btn1" size="large" @click="switchLoginMethod(false)">用户名密码登录</van-button>
      <p>立即注册/忘记密码</p>
    </div>

    <!-- 账户密码登录模块 -->
    <div class="box-login-content box-login-account" v-else>
      <van-cell-group>
        <van-field
          v-model="loginInfo.username"
          required
          clearable
          label="用户名"
          placeholder="邮箱/手机号/小米ID"
        />
        <van-field
          v-model="loginInfo.password"
          right-icon="question-o"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
        />
      </van-cell-group>
      <van-button class="btn" color="#FF6700" size="large" @click="login">登录</van-button>
      <van-button class="btn1" size="large" @click="switchLoginMethod(true)">手机短信登录/注册</van-button>
      <p>收不到验证码码?</p>
    </div>

    <!-- 其他方式登录模块 -->
    <van-divider dashed>其他方式登录</van-divider>

    <div class="sns">
      <a href="#" class="icon_type1">
        <i class="btn11"></i>
      </a>
      <a href="#" class="icon_type2">
        <i class="btn22"></i>
      </a>
      <a href="#" class="icon_type3">
        <i class="btn33"></i>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginInfo: {
        username: "admin",
        password: "123456",
        phoneNumber: "18502876757",
        sms: "",
        isPhoneLogin: false
      },
      isSend: false
    };
  },
  methods: {
    async login() {
      const { data: res } = await this.$http.post(
        "/mock/login",
        this.loginInfo
      );
      if (res.status !== 200) {
        return this.$toast.fail("登录失败");
      }
      this.$toast.success("登录成功");
      this.$router.replace("/index");
    },
    switchLoginMethod(status) {
      this.loginInfo = {
        isPhoneLogin: status,
        username: "admin",
        password: "",
        phoneNumber: "18502876757",
        sms: ""
      };
    },
    async sendCode() {
      const { data: res } = await this.$http.post(
        "/mock/login/sms",
        this.loginInfo
      );
      if (res.status !== 200) {
        return this.$notify({ type: "danger", message: "获取手机验证码失败" });
      }
      if (res.code) {
        this.$notify({
          type: "success",
          message: "验证码为：" + res.code,
          duration: 5000
        });
      } else {
        this.$notify({
          type: "success",
          message: "验证码已发送，请在5分钟内完成验证"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box-login {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 8px;
}

.box-login-content .van-cell-group {
  min-height: 105px;
}

.van-field {
  text-align: center;
}

.box2 {
  width: 50px;
  height: 50px;
  background-color: rgb(255, 103, 0);
  margin-bottom: 15px;
  border-radius: 5px;
}
.box1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}
.btn {
  margin: 20px 0;
  border-radius: 8px;
}
.btn1 {
  color: #2a2a2a;
  border: 1px solid rgb(214, 214, 214);
  border-radius: 8px;
}
p {
  text-align: center;
  color: rgb(147, 147, 147);
  margin-bottom: 20px;
}
.sns {
  display: flex;
  justify-content: center;
}

.icon_type1,
.icon_type2,
.icon_type3 {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  display: inline-block;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #00be00;
}

.icon_type1 {
  background-color: #ed9090;
}
.icon_type2 {
  background-color: #6bb6ea;
}
.icon_type3 {
  background-color: #00be00;
}

.btn11,
.btn22,
.btn33 {
  background: url(https://account.xiaomi.com/static/res/166d6dc/account-static/respassport/acc-2014/img/icons_type.png)
    no-repeat;
  display: block;
  width: 23px;
  height: 23px;
  margin: 5px auto 0;
}

.btn11 {
  background-position: -35px 0;
}
.btn22 {
  background-position: -57px 0;
}
.btn33 {
  background-position: -84px 0;
}
</style>
